<template>
  <Carousel
    :autoplay="true"
    :duration="2000"
    :initIndex="0"
    containerWidth="100%"
    containerHeight="35rem"
    :direction="true"
    directionMode="hover"
    :directionSize="30"
    directionColor="white"
    :indicator="true"
    indicatorMode="always"
    indicatorColor="white"
    indicatorActiveColor="#1d9383"
    @before-moving="beforeMoving"
    @after-moving="afterMoving"
  >
    <CarouselItem v-for="(item, index) in data" :key="index" :idx="index">
      <img :src="item" />
    </CarouselItem>
  </Carousel>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  setup() {
    const state = reactive({
      data: [
        "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00693-2745.jpg",
        "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2190440116,1436403087&fm=26&gp=0.jpg",
        "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3593656793,3600757928&fm=26&gp=0.jpg",
      ],
    });
    return {
      ...toRefs(state),
    };
  },

  data() {
    return {};
  },
  computed: {},
  methods: {},
});
</script>

<style scoped></style>
